<template>
  <div id="login">
    <input type="text" v-model="loginForm.username" placeholder="用户名"/>
    <input type="text" v-model="loginForm.password" placeholder="密码"/>
    <button @click="login">登录</button>
  </div>
</template>

<script>
  import {request} from '../network/request'
  import { mapMutations } from 'vuex';
    export default {
      name: "Login",
      data () {
        return {
          loginForm: {
            username: '',
            password: ''
          }
        }
      },
      methods: {
        ...mapMutations(['changeLogin']),
        login () {
          let _this = this;
          if (this.loginForm.username === '' || this.loginForm.password === '') {
            alert('账号或密码不能为空');
          } else {
            request({
              method: 'post',
              url: '/network/login',
              data: _this.loginForm,

            }).then(res => {
              if(res=='1'){
                _this.userToken = res;
                // 将用户token保存到vuex中
                _this.changeLogin({ Authorization: _this.userToken },this.loginForm.username);
                _this.$router.push('/home');
              }else {
                alert('账号或密码错误');
              }
            }).catch(error => {
              alert('账号或密码错误');
              console.log(error);
            });
          }
        }
      }
    }
</script>

<style scoped>
  #login{
    width: 100vw;
    height:100vh
  }

</style>
